<template>
<p>树节点可以在初始化阶段被设置为展开和选中。</p>
<div text="sm" m="y-4" data-v-72294632=""><p>分别通过 <code>default-expanded-keys</code> 和 <code>default-checked-keys</code> 设置默认展开和默认选中的节点。 需要注意的是，此时必须设置 <code>node-key</code>， 其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。</p>
</div>
  <el-tree
    style="max-width: 600px"
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps"
  />
</template>

<script lang="ts" setup>
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>